<template>
	<!-- 	<page-meta :page-style="'overflow:'+(pageMetaShow?'hidden':'visible')"></page-meta>
 -->
	<view class="content">
		<image class="indexBg" src="https://static20250730.oss-cn-hangzhou.aliyuncs.com/wechatminiv2/indexBg1.png" mode="aspectFill"></image>
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="tabLay">

			<next-tabs v-model="current" pillsBorderRadius="30rpx" :tabs="list1" :pills="true" line-height="0"
				fontSize='24rpx;' height='58rpx' lineHeight='58rpx' pillsColor="#FC98B5" bgColor='#FBFBFB'
				paddingItem='0 46rpx' activeColor="#fff" color="#B4B4B4" @change="tabChange"></next-tabs>
		</view>

		<noData v-if="leaderboardList.length === 0 && !loading"></noData>
		<template v-else>
			<view class="topUserWrap">
				<view class="topUser top2User" v-if="SecondData">
					<image class="top2" src="/static/my/top2.png" mode="widthFix"></image>
					<image :src="SecondData.avatar" class="userImg" mode="aspectFill" lazy-load></image>
					<view class="userTitle">
						{{SecondData.nickname}}
					</view>
					<view class="userQQ">
						QQ：{{SecondData.qq}}
					</view>
					<view class="userNumber">
						喵喵值 {{SecondData.points|pointsFilter}}
					</view>
				</view>
				<view class="topUser top1User" v-if="FirstData">
					<image class="top1" src="/static/my/top1.png" mode="widthFix"></image>
					<image :src="FirstData.avatar" class="userImg" mode="aspectFill" lazy-load></image>
					<view class="userTitle">
						{{FirstData.nickname}}
					</view>
					<view class="userQQ">
						QQ：{{FirstData.qq}}
					</view>
					<view class="userNumber">
						喵喵值 {{FirstData.points|pointsFilter}}
					</view>
				</view>
				<view class="topUser top3User" v-if="ThirdData">
					<image class="top3" src="/static/my/top3.png" mode="widthFix"></image>
					<image :src="ThirdData.avatar" class="userImg" mode="aspectFill" lazy-load></image>
					<view class="userTitle">
						{{ThirdData.nickname}}
					</view>
					<view class="userQQ">
						QQ：{{ThirdData.qq}}
					</view>
					<view class="userNumber">
						喵喵值 {{ThirdData.points|pointsFilter}}
					</view>
				</view>
			</view>
			<view class="userListWrap">
				<scroll-view style="height: 910rpx;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
					@scroll="scroll" :refresher-triggered="triggered" :refresher-threshold="100"
					refresher-background="transparent" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
					@refresherrestore="onRestore" @refresherabort="onAbort" @scrolltolower="scrolltolower">
					<view class="scroll-view-item" v-for="(item,index) in leaderboardList" :key="index" v-if="index>2">
						<view class="user">
							<view class="listNum">
								{{index + 1}}
							</view>
							<image :src="item.avatar" class="userImg" mode="aspectFit"></image>
							<view class="userInfo">
								<view class="name">
									{{item.nickname}}
								</view>
								<view class="qq">
									QQ：{{item.qq}}
								</view>
							</view>
						</view>
						<view class="numberTxt">
							喵喵值 {{item.points|pointsFilter}}
						</view>
					</view>
					<uni-load-more :status="loading ? 'loading' : noMoreData ? 'noMore' : 'more'" iconType="auto"></uni-load-more>
					
					<view class="scroll-view-item" style="height: 200upx;">
						<!-- 占位符 -->
					</view>
				</scroll-view>
			</view>
		</template>
		<view class="myNumberWrap">
			<view class="content">
				<view class="scroll-view-item content">
					<view class="user">
						<view class="listNum">
							{{current_user.rank||"未排名"}}
						</view>
						<image src="" class="userImg" mode="aspectFit"></image>
						<view class="userInfo">
							<view class="name">
								{{current_user.nickname}}
							</view>
							<view class="qq">
								QQ：{{current_user.qq}}
							</view>
						</view>
					</view>
					<view class="numberTxt">
						喵喵值 {{current_user.points|pointsFilter}}
						<view class="switchLay">
							<switch :checked="is_hide_qq" color="#FD798F" @change="switch1Change"
								style="transform:scale(0.5)" />
							<view class="switchTxt">{{is_hide_qq==1?'隐藏':'显示'}}</view>
						</view>
						<view class="switchTxt">
							打开后向平台展示QQ全号
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '喵气榜',
				pageMetaShow: false,
				current: -1,
				list1: ['今日', '本月', '总榜'],
				triggered: false,
				// checked: true,
				tabType: 'today',
				FirstData: '',
				SecondData: '',
				ThirdData: '',
				triggered: false,
				_freshing: false,
				leaderboardList: [],
				page: 1, // 当前页码
				page_size: 2, // 每页数量
				total: 0, // 总数据量
				loading: false, // 是否正在加载
				noMoreData: false, // 是否没有更多数据
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				current_user:'',
				is_hide_qq:false,//是否隐藏QQ (0-显示, 1-隐藏)
			}
		},
		mounted() {
			this.current = 0;
			this.is_hide_qq=uni.getStorageSync('userInfo').is_hide_qq==0?false:true
			this.tabChange(this.current);
		},
		onLoad() {
			this.resetList()
		},
		filters: {
			pointsFilter(value) {
				if (typeof value !== 'number' || isNaN(value)) {
					return '0';
				}
				// 如果数字小于10000，直接返回
				if (value < 10000) {
					return value.toString();
				}

				// 如果数字大于等于10000，转换为万单位并保留两位小数
				return (value / 10000).toFixed(2) + '万';
			},
		},
		methods: {
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				this.is_hide_qq = e.detail.value;
				this.$http('/v1/users/update-info', {
					is_hide_qq:this.is_hide_qq?1:0,
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.$showToast('修改成功');
						this.getOpenerEventChannel().emit('refreshData')
						// setTimeout(() => uni.navigateBack(), 500);
					}else{
						this.$showToast(res.msg)
					}
				})
			},
			//自定义下拉刷新控件被下拉
			onPulling(e) {
				// console.log("onpulling", e);
				// this.page = 1;
				// this.noMoreData = false;
				// this.leaderboardFn();
			},
			// 自定义下拉刷新被触发	
			onRefresh() {
				console.log("onRefresh");
				let that = this;
				if (this._freshing) return;
				// 1. 设置刷新状态
				this._freshing = true;
				this.triggered = true;
				// 2. 重置分页参数
				// 3. 重新加载数据
				this.resetList();
				// 4. 无论成功失败，2秒后复位刷新状态
				setTimeout(() => {
					this.triggered = false;
					this._freshing = false;
				}, 3000);
			},
			// 自定义下拉刷新被复位	
			onRestore() {
				this.triggered = false;
				this._freshing = false;
				// this.triggered = false // 'restore'; // 需要重置
				console.log("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
				console.log("onAbort");
			},
			// 滚动到底部/右边，会触发 scrolltolower 事件	
			scrolltolower: function(e) {
				console.log(e);
				// 如果没有更多数据或正在加载，则返回
				if (this.noMoreData || this.loading) return

				// 页码增加并获取下一页数据
				this.page++
				this.leaderboardFn()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 回到顶部，目前没用，感觉可以优化流程
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			// 重置列表（用于下拉刷新）
			resetList() {
				this.page = 1
				this.noMoreData = false
				this.leaderboardFn()
			},
			// tab的点击
			tabChange(e) {
				let that = this;
				console.log(e, 'tab');
				switch (e) {
					case 0:
						that.tabType = 'today';
						break;
					case 1:
						that.tabType = 'month';
						break;
					case 2:
						that.tabType = 'total';
						break;
					default:
						that.tabType = 'today';
						break;
				}
				this.leaderboardFn()
			},
			// 榜单获取
			leaderboardFn() {
				// 防止重复请求
				if (this.loading) return;

				// 设置加载状态
				this.loading = true;
				uni.showLoading({
					title: '加载中...'
				})
				try {
					this.$http('/v1/users/leaderboard', {
						page: this.page,
						type: this.tabType,
						limit: 20,
					}).then(res => {
						console.log(res);
						if (res.code === 0) {
							const
								data = res.data;
							// 如果是第一页，直接赋值
							if (this.page === 1) {
								this.leaderboardList = data.leaderboard || []
							} else {
								// 后续页，合并数据
								this.leaderboardList = [...this.leaderboardList, ...(data.leaderboard || [])]
							}
							this.FirstData = this.leaderboardList[0] || '';
							this.SecondData = this.leaderboardList[1] || '';
							this.ThirdData = this.leaderboardList[2] || '';
							// 更新总数据量
							this.total = data.total || 0

							// 判断是否还有更多数据
							this.noMoreData = this.leaderboardList.length >= this.total
							this.current_user=data.current_user;
							// 把下拉状态复位
							this.triggered = false;
							this._freshing = false;
						} else {
							this.$showToast(res.msg)
						}
					})

				} catch (error) {
					console.error('请求失败:', error)
					uni.showToast({
						title: '网络请求失败',
						icon: 'none'
					})
				} finally {
					// 重置加载状态
					this.loading = false
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.indexBg {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: -2;
			top: 0;
		}

		.mainHeader {
			margin-bottom: 34upx;
		}

		.tabLay {
			width: 410upx; //430upx;
			margin: 0 auto;
			border-radius: 30upx;
			overflow: hidden;
		}

		.topUserWrap {
			margin-top: 126upx;
			margin-bottom: 56upx;
			@include flexLayout(flex-end, center);

			.topUser {
				@include flexLayout(center, center);
				flex-direction: column;
				position: relative;

				.top2,
				.top1,
				.top3 {
					position: absolute;
					top: 0
				}

				.top1 {
					@include setwh(94upx, 0);
					top: -62upx;
				}

				.top2 {
					@include setwh(92upx, 0);
					top: -68rpx;
					left: 0;
				}

				.top3 {
					@include setwh(102upx, 0);
					top: -52rpx;
					right: 0;
				}

				.userImg {
					@include setwh(126upx, 126upx);
					background-color: #F2F2F2;
					border-radius: 50%;
					margin-bottom: 10upx;
				}

				.userTitle {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 23rpx;
					color: #3E3E3E;
					line-height: 32rpx;
				}

				.userQQ {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 17rpx;
					color: #909090;
					line-height: 25rpx;
				}

				.userNumber {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 16rpx;
					color: #919191;
					line-height: 22rpx;
				}
			}

			.top1User {
				margin: 0 76upx;

				.userImg {
					@include setwh(164upx, 164upx);
				}
			}
		}

		.userListWrap {
			width: 750rpx;
			height: 910rpx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, #FFFFFF 100%);


		}

		.scroll-view-item {
			@include flexLayout(center, space-between);
			padding: 22upx 78upx 22upx 40upx;

			.listNum {
				min-width: 80upx;
				padding-right: 16upx;
				text-align: center;
				font-family: MaokenAssortedSans;
				font-size: 38rpx;
				color: #787878;
				line-height: 46rpx;
				// margin-right: 40upx;
			}

			.user {
				@include flexLayout(center, center);

				// width: calc(100% - 76upx - 32upx);
				.userImg {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
					background-color: #F2F2F2;
					margin-right: 32upx;
				}

				.userInfo {
					.name {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: 500;
						font-size: 23rpx;
						color: #3E3E3E;
						line-height: 32rpx;
						margin-bottom: 10upx;
					}

					.qq {
						font-family: SourceHanSansSC, SourceHanSansSC;
						font-weight: 500;
						font-size: 17rpx;
						color: #3E3E3E;
						line-height: 25rpx;
					}
				}
			}

			.numberTxt {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 16rpx;
				color: #919191;
				line-height: 22rpx;
			}
		}

		.myNumberWrap {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFB2B2 100%);
			width: 750rpx;
			padding-top: 80upx;

			.content {
				background-color: #FFFFFF;
				height: 192rpx;
				border-radius: 19rpx 19rpx 0rpx 0rpx;

				.numberTxt {
					text-align: right;

					.switchLay {
						@include flexLayout(center, center);

						switch {
							position: relative;
							right: -10upx;
						}
					}

					.switchTxt {
						font-size: 12rpx;
					}
				}
			}
		}
	}
</style>